<style>
.layOut ::v-deep .uv-navbar__content__left {
  padding-left: 8px !important;
}
</style>
<template>
  <div class="layOut">
    <uv-loading-page :loading="loading" icon-size="50rpx"></uv-loading-page>
    <div ref="header" id="header">
      <div v-if="showNavbar" style="position: relative;z-index: 2" :style="{height: statusBarHeight + 'px', backgroundColor: color.statusBarHeightColor || '#fff'}"></div>
      <uv-navbar leftIconSize="21px" leftIconColor="#0b0b0b" :titleStyle="{fontSize: '16px', lineHeight: '30px'}" v-if="showNavbar" :safeAreaInsetTop="false" :fixed="false" :border="navbarOption['border'] || false" :autoBack="navbarOption['autoBack'] || true" :bgColor="navbarOption['bgColor'] || 'rgba(255,255,255,1)'" :title="navbarOption['title'] || ''">
        <template v-slot:right>
          <slot name="navbar-right"></slot>
        </template>
      </uv-navbar>
      <slot name="header"></slot>
    </div>
    <div ref="main" id="main" class="element-main" :style="{maxHeight: `${mainHeight}px!important`, height: `${mainHeight}px!important`}" style="overflow-y: hidden;">
      <slot name="main"></slot>
    </div>
    <div ref="footer" id="footer">
      <slot name="footer"></slot>
      <div class="bfff">
        <uv-safe-bottom></uv-safe-bottom>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    navbarOption: {
      type: Object,
      default: {},
    },
    color: {
      type: Object,
      default: {},
    },
    showNavbar: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      mainHeight: '',
      pageForm: {},
      statusBarHeight: 0,
      headerHeight: 0,
      footerHeight: 0,
   windowHeight: uni.getWindowInfo().windowHeight,
        footOpacity: 0
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.menuButtonInfo()
    })
    setTimeout(() => {
      clearInterval(this.timer)
      this.$emit('on-ready', { mainHeight: this.windowHeight - this.footerHeight - this.headerHeight })
    }, 600)
    // this.timer = setInterval(() => {
    //   this.menuButtonInfo()
    // }, 300)
    // setTimeout(() => {
    //   clearInterval(this.timer)
    //   this.$emit('on-ready', { mainHeight: this.windowHeight - this.footerHeight - this.headerHeight })
    // }, 600)
  },
  methods: {
    getHeaderClientHeight() {
      this.loading = true
      try {
        /* #ifdef H5 */
        if (!this.$refs.header) {
        } else {
          if (this.headerHeight != this.$refs.header.clientHeight) {
            this.headerHeight = this.$refs.header.clientHeight
          }
          this.getFooterClientHeight()
        }
        /* #endif */

        /* #ifdef MP */
        uni.createSelectorQuery().in(this).select("#header").boundingClientRect((data) => {
          if (data) {
            if (this.headerHeight != data.height) {
              this.headerHeight = data.height
            }
            this.getFooterClientHeight()
          }
        }).exec();
        /* #endif */
      } catch (error) {

      }
      console.log('getHeaderClientHeight', this.headerHeight)
      return this.headerHeight
    },
     getFooterClientHeight() {
      try {
        /* #ifdef H5 */
        if (!this.$refs.footer) {
        } else {
          this.loading = false
          if (this.footerHeight != this.$refs.footer.clientHeight) {
            this.footerHeight = this.$refs.footer.clientHeight
          }
          if (this.footerHeight > 0) this.footOpacity = 1
           if (this.mainHeight != (this.windowHeight - this.headerHeight - this.footerHeight)) {
              this.mainHeight = this.windowHeight - this.headerHeight - this.footerHeight
            }
        }
        /* #endif */

        /* #ifdef MP */
        uni.createSelectorQuery().in(this).select("#footer").boundingClientRect((data) => {
          if (data) {
            this.loading = false
            if (this.footerHeight != data.height) {
              this.footerHeight = data.height
            }
            if (this.footerHeight > 0) this.footOpacity = 1
            if (this.mainHeight != (this.windowHeight - this.headerHeight - this.footerHeight)) {
              this.mainHeight = this.windowHeight - this.headerHeight - this.footerHeight
            }
          } else {
          }
        }).exec();
        /* #endif */
      console.log('getFooterClientHeight', this.footerHeight)
      console.log('getFooterClientHeight', this.footerHeight)

      } catch (error) {

      }
      return this.footerHeight
    },
    menuButtonInfo() {
      try {
        let res = uni.getWindowInfo();
        let menuButtonInfo = {}
        /* #ifndef H5 */
        uni.getMenuButtonBoundingClientRect();
        /* #endif */
        if (res.statusBarHeight == 0) {
          if (this.statusBarHeight != menuButtonInfo.top) {
            this.statusBarHeight = menuButtonInfo.top;
          }
          this.getHeaderClientHeight()
        } else {
          if (this.statusBarHeight != res.statusBarHeight) {
            this.statusBarHeight = res.statusBarHeight
          }
          this.getHeaderClientHeight()
        }

      } catch (error) {
        console.log(error)

      }
    },
  },
};
</script>


<style scoped>
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.elementLayOut {
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}
.elementLayOut-footer {
  opacity: 0;
  animation: fadeIn 2.5s ease forwards;
}
</style>


